import React from "react";
import "./index.css";
import User from "../User/User";
export default class Left extends React.Component {
  constructor() {
    super();
    this.state = {
      websocket: new WebSocket("ws://172.16.34.171:3000"),
      userlist: null,
    };
  }
  componentDidMount() {
    this.state.websocket.onmessage = this.onmessage;
  }
  onmessage = (msg) => {
    const msgObj = JSON.parse(msg.data);
    this.setState({
      userlist: msgObj.userlist,
    });
  };

  render() {
    const { username } = this.props;
    const { userlist } = this.state;
    return (
      <>
        <div className="left-container">
          <User username={username} img={true} />
          <div className="userlist-title">在线用户</div>
          {userlist
            ? userlist.map((user, index) => (
                <User key={index} username={user} />
              ))
            : ""}
        </div>
      </>
    );
  }
}
